<template>
  <div
    style="
      width: 100%;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
    "
    v-if="!actualData.length && !predictData.length"
  >
    <a-empty style="opacity: 0.5" />
  </div>
  <div v-else class="lineBox">
    <!-- <div class="subTitle">{{ date }} 预测收入：{{ pedictIncome }}元</div> -->
    <div ref="chartRef" class="chart" />
  </div>
</template>

<script setup>
// 
import * as echarts from "echarts"
import { chartOption } from "./chartOption"

const props = defineProps({
  actualData: {
    type: Array,
    default: () => [],
  },
  predictData: {
    type: Array,
    default: () => [],
  },
  priceData: {
    type: Array,
    default: () => [],
  },
  date: {
    type: String,
    default: "",
  },
  pedictIncome: {
    type: String,
    default: "",
  },
})

const chartRef = ref(null)
let chart = null

const initChart = () => {
  if (!chartRef.value) return
  chart = echarts.init(chartRef.value)
  const option = { ...chartOption }

  // 获取x轴时间点数组
  //const timePoints = chartOption.xAxis.data
  //chartOption.xAxis.data = props.actualData.map((item) => item.time)
  // 处理预测数据
  option.series[0].data = props.predictData.map((item) => item.power)
  // 处理实际数据
  option.series[1].data = props.actualData.map((item) => item.power)
  // 处理价格数据
  option.series[2].data = handleLine(priceData.value, "priceHourList")
  chart.setOption(option)
}

const handleLine = (list = [], handleArr) => {
  let newArr = list.reduce((all, item) => {
    return [...all, ...item[handleArr]]
  }, [])

  return newArr
}

const actualData = ref([])
const predictData = ref([])
const priceData = ref([])
watch(
  () => [props.actualData, props.predictData, props.priceData],
  async ([val, val2, val3]) => {
    if (val.length || val2.length || val3.length) {
      actualData.value = val
      predictData.value = val2
      priceData.value = val3
      await nextTick()
      initChart()
    }
  },
  { immediate: true }
)

onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener("resize", () => {
      chart && chart.resize()
    })
  })
})
</script>

<style lang="less" scoped>
.lineBox {
  position: relative;
  .subTitle {
    position: absolute;
    top: 10px;
    right: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
  }
}
.chart {
  width: 100%;
  height: 600px;
}
</style>
./chartOption1
